<template>
  <div class="hello">
    <el-container style="height: 100%">
      <el-aside :width="!isOpen?'64px':'200px'" style="background-color: #304156;transition:width .3s;">
        <el-menu
          background-color="#304156"
          text-color="#bfcbd9"
          active-text-color="#409eff"
		  @select="select"
		  router
		  :collapse="!isOpen"
		  style="border-right:none;"
		  :default-active="defaultActive"
        >
		  <menu-tree :menuData="menu"/>
        </el-menu>
		
      </el-aside>

      <el-container>
        <el-header class="header"> 
			<!-- menu cllapse , 面包屑 -->
			<div class="navbar">
				<div class="before">
					<div class="menu-close" @click="closeMenu">
						<i class="el-icon-s-fold" v-if="isOpen"></i>
						<i class="el-icon-s-unfold" v-if="!isOpen"></i>
					</div>
				</div>
				<div class="after d-flex-ec">
					<el-dropdown @command="handleCommand">
						<span class="user-name">
							<span>{{ userObj && userObj.nickname }}</span>
							<i class="el-icon-caret-bottom"></i>
						</span>
						<el-dropdown-menu slot="dropdown">
						<el-dropdown-item command="changpwd">修改密码</el-dropdown-item>
						<el-dropdown-item command="logout">退出系统</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
				</div>
			</div>
			
			<div class="route-tag">
				<template v-for="(item) in openPages" :label="item.text" :name="item.path">
					<route-tag 
						:key="item.path" 
						:label="item.text" 
						:path="item.path"
						:isActive="activeRouter==item.path"
						:canClose="item.close"
						@click="go"
						@close="close"
						/>
				</template>
			</div>
		</el-header>

        <el-main class="main">
		  <transition name="fade-transform">
			<keep-alive>
				<router-view v-if="$route.meta.keep" class="child-view"></router-view>
			</keep-alive>
		  </transition>
			<router-view v-if="!$route.meta.keep" class="child-view"></router-view>
        </el-main>
      </el-container>
    </el-container>
	<el-dialog
		title="修改密码" 
		v-model="pwdDialogShow"
		:visible.sync="pwdDialogShow"
		:close-on-click-modal="false"
		width="25%"
	>
		<json-form :options="options" :form="pwdForm" :status-icon="true" ref="pForm">

		</json-form>
		<span slot="footer" class="dialog-footer">
			<el-button @click="pwdDialogShow = false">取 消</el-button>
			<el-button type="primary" @click="confirmPassword">确 定</el-button>
		</span>	
	</el-dialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex"
import routeTag from "@/components/route-tag.vue"
import menuTree from "@/components/menu-tree.vue"
import jsonForm from "@/components/json-form.vue"
import {mapState} from "vuex"
import {updatePwd} from "@/apis/user/index"
export default {
	name: "Index",
	data(){
		return {
			isOpen:true,
			pwdDialogShow:false,
			pwdForm:{
				oldPwd:"",
				newPwd:"",
				confirmPwd:""
			},
			options:[
				{
					key:"oldPwd",
					type:"el-input",
					label:"旧密码",
					required:true,
					props:{
						type:"password",
						showPassword:true
					}
				},
				{
					key:"newPwd",
					type:"el-input",
					label:"新密码",
					required:true,
					props:{
						type:"password",
						showPassword:true
					},
					rules:[
						{min:6,max:10,trigger:"blur"}
					]
				},
				{
					key:"confirmPwd",
					type:"el-input",
					label:"确认密码",
					required:true,
					props:{
						type:"password",
						showPassword:true
					},
					rules:[
						{
							validator:(rule,value,callback)=>{
								if(value==""){
									callback(new Error("请再次输入密码"))
								}else if(value!=this.pwdForm.newPwd){
									callback(new Error("两次密码输入不一致"))
								}else{
									callback()
								}
							},
							trigger:"blur"
						},
						{min:6,max:10,trigger:"blur"}
					]

				}
			]
		}
	},
	components:{
		routeTag,
		menuTree,
		jsonForm
	},
	methods: {
		select(){
		
		},
		handleCommand(command) {
			switch (command) {
			case "logout":
				this.logout()
				break
			case "changpwd":
				this.changePassword()
				break
			default:
				break
			}
		},
		logout(){
			localStorage.removeItem("token")
			localStorage.removeItem("user")
			localStorage.removeItem("menu")
			localStorage.removeItem("role")
			localStorage.removeItem("router")
			this.$router.replace("/login")
		},
		changePassword(){
			this.pwdDialogShow = true
		},
		confirmPassword(){
			console.log("确认修改密码",this.$refs)
			this.$refs.pForm.submit((form)=>{
				console.log(form)
				updatePwd(form).then(res=>{
					this.pwdDialogShow = false
				})
			})
		},
		closeMenu(){
			this.isOpen = !this.isOpen
		},
		go(e){
			console.log("go",e)
			this.$store.dispatch("setActiveRoute",e)
			this.$router.push(e)
		},
		close(e){
			console.log("close",e)
			this.$store.dispatch("removeTab",e)
		}
	},
	computed:{
		...mapGetters(["openPages","activeRouter","caches"]),
		...mapState(["menu","userObj"]),
		defaultActive(){
			return this.$route.path
		}
	}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.hello {
  height: 100%;
}
.header{
	height: 100px !important;
	padding: 0;
	border-bottom: 1px solid #eee;
}
.navbar{
	color: #fff;
	font-size: 24px;
	display: flex;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	// background-color: rgba(0, 21, 41);
	padding-right: 20px;
	background-color: #304156;
	.menu-close{
		padding: 0 20px;
	}
	.menu-close:hover{
		// background-color: #eee;
		cursor: pointer;
	}
	margin-bottom: 10px;
	.after, .user-name{
		color: #fff;
	}
	.user-name{
	cursor: pointer;
	}
}
.route-tag{
	display: flex;
	justify-content: flex-start;
	padding: 2px 20px;
	overflow: auto;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
}
/deep/ .el-main{
	// background: #eef0f3;
}
/deep/ .el-menu{
	transition: all .5s;
}
// /deep/ .el-menu-item{
// 	padding-left: 15px !important;
// 	.el-tooltip,.el-submenu__title{
// 		padding-left:15px !important;
// 	}	
// }
// /deep/ .el-submenu{
// 	.el-submenu__title{
// 		padding-left:15px !important;
// 	}	
// }
.child-view {

  transition: all 0.6s cubic-bezier(0.55, 0, 0.1, 1);
}
.slide-left-enter,
.slide-right-leave-active {
  opacity: 0;
  -webkit-transform: translate(-80px, 0);
  transform: translate(-80px, 0);
}
.slide-left-leave-active,
.slide-right-enter {
  opacity: 0;
  -webkit-transform: translate(100%, 0);
  transform: translate(100%, 0);
}
.main{
	background-color: #f2f3f5;
}
</style>
